import React, { useState, useMemo } from "react";
import { Card, Input, Divider, Typography, Table, Space, Tag } from "antd";
import {
  getFirstLetter,
  getLastLetter,
  getNameAbbreviation,
  getPinyin,
} from "../utils/stringUtil";

const { Title, Paragraph, Text } = Typography;

const StringUtilDemo: React.FC = () => {
  const [inputValue, setInputValue] = useState("张三");
  const [names, setNames] = useState<string[]>([
    "张三",
    "李四",
    "John Smith",
    "王五",
    "Alice Johnson",
    "赵六",
    "黄柳",
  ]);

  const results = useMemo(() => {
    if (!inputValue) return {};

    return {
      firstLetter: getFirstLetter(inputValue),
      lastLetter: getLastLetter(inputValue),
      abbreviation: getNameAbbreviation(inputValue),
      pinyin: getPinyin(inputValue, " "),
    };
  }, [inputValue]);

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "首字母",
      dataIndex: "firstLetter",
      key: "firstLetter",
      render: (text: string) => <Tag color="blue">{text}</Tag>,
    },
    {
      title: "尾字母",
      dataIndex: "lastLetter",
      key: "lastLetter",
      render: (text: string) => <Tag color="green">{text}</Tag>,
    },
    {
      title: "姓名缩写",
      dataIndex: "abbreviation",
      key: "abbreviation",
      render: (text: string) => <Tag color="purple">{text}</Tag>,
    },
    {
      title: "完整拼音",
      dataIndex: "pinyin",
      key: "pinyin",
      render: (text: string) => <Text code>{text}</Text>,
    },
  ];

  const tableData = useMemo(() => {
    return names.map((name, index) => ({
      key: index,
      name,
      firstLetter: getFirstLetter(name),
      lastLetter: getLastLetter(name),
      abbreviation: getNameAbbreviation(name),
      pinyin: getPinyin(name, " "),
    }));
  }, [names]);

  return (
    <div style={{ padding: "24px" }}>
      <Title level={2}>字符串工具函数演示</Title>

      <Card title="基本使用" style={{ marginBottom: "24px" }}>
        <Space direction="vertical" style={{ width: "100%" }}>
          <Input
            placeholder="请输入字符串"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            style={{ marginBottom: "16px" }}
            allowClear
          />

          <div>
            <Text strong>首字母：</Text>
            <Tag color="blue">{results.firstLetter || "无"}</Tag>
          </div>

          <div>
            <Text strong>尾字母：</Text>
            <Tag color="green">{results.lastLetter || "无"}</Tag>
          </div>

          <div>
            <Text strong>缩写：</Text>
            <Tag color="purple">{results.abbreviation || "无"}</Tag>
          </div>

          <div>
            <Text strong>完整拼音：</Text>
            <Text code>{results.pinyin || "无"}</Text>
          </div>
        </Space>
      </Card>

      <Card title="示例数据">
        <Table columns={columns} dataSource={tableData} pagination={false} />
      </Card>

      <Divider />

      <Card title="使用说明">
        <Typography>
          <Title level={4}>API</Title>
          <pre
            style={{
              background: "#f6f8fa",
              padding: "16px",
              borderRadius: "4px",
            }}
          >
            {`// 获取字符串首字母（中文会转为拼音首字母）
getFirstLetter(str: string): string

// 获取字符串最后一个字母（中文会转为拼音首字母）
getLastLetter(str: string): string

// 获取姓名缩写（最多取前两个字的首字母）
getNameAbbreviation(name: string, limit: number = 2): string

// 获取完整拼音
getPinyin(str: string, separator: string = ''): string`}
          </pre>

          <Paragraph>
            这些工具函数用于处理中英文字符串，可以提取首字母、尾字母或生成姓名缩写。
            对于中文字符，会自动转换为拼音并提取相应字母。
          </Paragraph>
        </Typography>
      </Card>
    </div>
  );
};

export default StringUtilDemo;
